<script setup lang="ts">
import { roleApi } from "@/api/admin/role";
import { ElDialog, ElTree, ElButton, ElMessage } from "element-plus";
import { ref } from "vue";

const treeRef = ref<any>(null);

const visible = ref(false);

const roleId = ref<any>("");

const rolePermission = ref<any>([]);

const rolePermissionKeys = ref<any>([]);

const props = defineProps({
  permissionMetaTree: {
    type: Array,
    default: () => [],
  },
});

// 打开弹窗
const open = (id: string, rolePermissionRes: any = []) => {
  if (id) {
    // console.log(props.permissionMetaTree);
    roleId.value = id;
    visible.value = true;
    rolePermission.value = rolePermissionRes;
    rolePermissionKeys.value = rolePermissionRes.map((item: any) => {
      return item.value;
    });
  }
};

// 清空表单
const clearFormValue = () => {
  roleId.value = "";
  rolePermission.value = [];
  rolePermissionKeys.value = [];
};

// 取消
const handleCancel = () => {
  clearFormValue();
  visible.value = false;
};

// 关闭弹窗
const handleClose = (deno: () => void) => {
  handleCancel();
  treeRef.value.setCheckedKeys([]);
  deno();
};

// 提交
const handleOk = async () => {
  // console.log(rolePermission.value);
  const permissionKeys = treeRef.value.getCheckedKeys();
  const permissionList = permissionKeys.map((item: any) => {
    return {
      value: item,
      roleId: roleId.value,
    };
  });
  const ret = await roleApi.saveRolePermissionApi(roleId.value, permissionList);
  if (ret.code === 200) {
    ElMessage.success("设置成功");
    handleCancel();
  } else {
    console.error(ret);
  }
};

// 自定义树节点类名
const customNodeClass = (data: any) => {
  // console.log(data);

  if (data.children && data.children.length > 0) {
    if (!data.children[0].children) {
      return "menu-item";
    }
    return "is-tow-children";
  }
  return "";
};

// 暴露方法
defineExpose({
  open,
});
</script>

<template>
  <el-dialog title="设置角色权限" width="860px" :before-close="handleClose" v-model="visible">
    <el-tree :default-checked-keys="rolePermissionKeys" :expand-on-click-node="false" ref="treeRef"
      :highlight-current="true" :check-on-click-node="false" class="permission-tree" default-expand-all node-key="value"
      :props="{
        children: 'children',
        label: (node: any) => node.label,
        class: customNodeClass
      }" :data="props.permissionMetaTree" show-checkbox />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleOk"> 提交 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="less" scoped>
:deep(.is-tow-children) {
  .el-tree-node__content {
    color: #626aef;
  }

  // .el-tree-node__children {
  //   display: flex;
  //   flex-direction: row;
  //   flex-wrap: wrap;
  // }

  .el-tree {
    --el-tree-node-hover-bg-color: #fff;
  }

  .menu-item>.el-tree-node__children {
    display: grid;
    // grid-template-columns: 180px 180px 180px 180px;
    grid-template-columns: repeat(4, 1fr);
    box-sizing: border-box;

    // >.el-tree-node {
    //   >.el-tree-node__content {
    //     // background-color: #1f7177;
    //     padding: 0;
    //   }
    // }

    .el-tree-node__content {
      // background-color: #ffffff00;
      padding-left: 0 !important;
    }

  }

}
</style>
